<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="130px"
    >
      <h2 style="text-align: center">证书缴费记录</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="证书编号/专利号" prop="num">
            <el-select
              v-model="formData.num"
              placeholder="请选择证书编号/专利号"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.certName"
                :value="item.num"
              >
                <span style="float: left">{{ item.certName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.num
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费用" prop="fee">
            <el-input-number
              v-model="formData.fee"
              placeholder="费用"
              :step="1"
              :style="{ width: '100%' }"
              controls-position="right"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="缴费日期" prop="payDate">
            <el-date-picker
              v-model="formData.payDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择缴费日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  payLogAdd,
  payLogEdit,
  payLogInfo,
} from "@/api/company/certificateLog.js";
import { listSelect } from "@/api/company/cert.js";

export default {
  components: {},
  props: [],
  data() {
    return {
      options: [],
      formData: {
        num: undefined,
        payDate: null,
      },
      rules: {
        payDate: [
          {
            required: true,
            message: "请选择缴费日期",
            trigger: "change",
          },
        ],
        fee: [
          {
            required: true,
            message: "请输入费用",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请选择证书编号/专利号",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
    this.getCert();
    this.formData.num = this.$route.query.num;
  },
  mounted() {},
  methods: {
    getinfo() {
      payLogInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
    } /** 查询部门下拉树结构 */,
    getCert() {
      listSelect().then((response) => {
        this.options = response.data;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.certPayLogId != undefined) {
            payLogEdit(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            payLogAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
